<template>
  <div class="theme-selector">
    <div class="trigger-btn-wrapper">
      <!-- 左侧按钮样式 -->
      <div id="trigger-btn" class="trigger-btn" @click="onClick">
        <div class="middle-btn"></div>
      </div>

      <!-- 主题列表框 -->
      <div class="content-wrapper" v-show="showMenu">
        <!-- 时间变化列表 -->
        <div class="menu-wrapper">
          <div
            class="menu-item"
            :class="[`${index === currentSelected ? 'active' : ''}`]"
            v-for="(item, index) in dayTimeItems"
            :key="item.key"
            @click="clickMenuItem(item, index)"
          >
            {{ item.value }}
          </div>
        </div>

        <!-- 天气变化列表 -->
        <div class="menu-wrapper">
          <div
            class="menu-item"
            :class="[`${index === currentSelected2 ? 'active' : ''}`]"
            v-for="(item, index) in weahterItems"
            :key="item.key"
            @click="clickMenuItem2(item, index)"
          >
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { WeatherMap } from "@/config/constant/BgMap";
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "ThemeSelector",
  data() {
    return {
      showMenu: false,
      currentSelected: 0,
      currentSelected2: 0,
    };
  },
  computed: {
    ...mapGetters(["currentTime", "currentTheme"]),
    // 时间列表
    dayTimeItems() {
      let arr = [];
      for (const key in WeatherMap) {
        if (WeatherMap[key].type === "time") {
          arr.push({
            key: key,
            value: WeatherMap[key].value,
          });
        }
      }
      return arr;
    },

    // 天气列表
    weahterItems() {
      let arr = [];
      for (const key in WeatherMap) {
        if (WeatherMap[key].type === "weather") {
          arr.push({
            key: key,
            value: WeatherMap[key].value,
          });
        }
      }
      return arr;
    },
  },
  methods: {
    ...mapMutations([
      "setBgImage",
      "setCurrentTheme",
      "setCurrentTime",
      "setChangeMode",
    ]),
    onClick() {
      let btn = document.getElementById("trigger-btn");
      btn.setAttribute("class", "trigger-btn trigger-btn-2");
      this.showMenu = true;
      setTimeout(() => {
        btn.setAttribute("class", "trigger-btn");
      }, 2000);
    },
    // 隐藏菜单
    hideMenu() {
      this.showMenu = false;
    },
    // 点击菜单项
    clickMenuItem(val, index) {
      let bg = WeatherMap.noon.bg;
      let time = WeatherMap.noon.key;
      this.currentSelected = index;

      for (const key in WeatherMap) {
        if (val.key === key) {
          bg = WeatherMap[key].bg;
          time = WeatherMap[key].key;
        }
      }
      this.setBgImage(bg);
      this.setCurrentTime(time);
      this.setChangeMode(0);
      // 如果下雨天，则所有背景都是雨天背景
      if (this.currentTheme === WeatherMap.rainy.key) {
        this.setBgImage(WeatherMap.rainy.bg);
      }
    },
    clickMenuItem2(val, index) {
      let bg = WeatherMap.noon.bg;
      // this.currentSelected = -1;
      this.currentSelected2 = index;

      for (const key in WeatherMap) {
        if (val.key === key) {
          bg = WeatherMap[key].bg;
        }
      }
      this.setCurrentTheme(val.key);
      this.setBgImage(bg);
      if (this.currentTime === WeatherMap.dusk.key) {
        // 如果是傍晚
        switch (this.currentTheme) {
          case WeatherMap.rainy.key: // 如果是雨天则设置雨天背景
            this.setBgImage(WeatherMap.rainy.bg);
            break;
          case WeatherMap.overcast.key: // 如果是阴天则设置阴天背景
            this.setBgImage(WeatherMap.overcast.bg);
            break;
          default:
            // 默认设置傍晚-晴天背景
            this.setBgImage(WeatherMap.dusk.bg);
        }
      }

      if (this.currentTime === WeatherMap.evening.key) {
        // 如果是晚上
        switch (this.currentTheme) {
          case WeatherMap.rainy.key: // 如果是雨天则设置雨天背景
            this.setBgImage(WeatherMap.rainy.bg);
            break;
          case WeatherMap.overcast.key: // 如果是阴天则设置阴天背景
            this.setBgImage(WeatherMap.overcast.bg);
            break;
          default:
            // 默认设置晚上-晴天背景
            this.setBgImage(WeatherMap.evening.bg);
        }
      }

      // 如果下雨天，则所有背景都是雨天背景
      if (this.currentTheme === WeatherMap.rainy.key) {
        this.setBgImage(WeatherMap.rainy.bg);
      }

      this.setChangeMode(0);
    },
  },
};
</script>

<style lang="scss" scoped>
.theme-selector {
  position: fixed;
  left: 0;
  top: 30vh;
  z-index: 100;

  @keyframes btn-animation {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }

  .trigger-btn-wrapper {
    position: relative;
    .trigger-btn {
      position: absolute;
      left: -30px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      animation: btn-animation 2s infinite;
      transition: 1s;
      display: flex;
      justify-content: center;
      align-items: center;
      .middle-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.6);
      }
    }
    .trigger-btn-2 {
      left: 0;
      transition: 1s;
      animation-play-state: paused;
    }

    .content-wrapper {
      position: absolute;
      width: 94vw;
      top: 60px;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 20px;
      margin: 0 3vw;
    }

    .menu-wrapper {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 20px;

      .menu-item {
        padding: 8px 20px;
        border: 1px solid transparent;
        box-sizing: border-box;
      }

      .active {
        color: #00c6fb;
        border: 1px solid #00c6fb;
        border-radius: 999em;
      }
    }
  }
}
</style>